<template>
    <div class="loginDialog">
        <el-dialog
                :visible.sync="dialogVisible"
                width="409px"
                :before-close="handleClose">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="密码登录" name="first">
                    <el-form ref="loginForm" :model="loginForm" :rules="registerRules" class="login-form">
                        <el-form-item prop="phone">
                            <el-input
                                    prefix-icon="el-icon-mobile-phone"
                                    v-model="loginForm.phone"
                                    type="text" auto-complete="off"
                                    placeholder="请输入手机号">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                    prefix-icon="el-icon-lock"
                                    v-model="loginForm.password"
                                    type="password"
                                    auto-complete="off"
                                    placeholder="请输入密码"
                                    @keyup.enter.native="handleLogin"
                            >
                            </el-input>
                        </el-form-item>

                        <el-form-item style="width:100%;">
                            <el-button
                                    :loading="loading"
                                    size="medium"
                                    type="primary"
                                    style="width:100%;"
                                    @click.native.prevent="handleLogin"
                            >
                                <span v-if="!loading">登 录</span>
                                <span v-else>登 录 中...</span>
                            </el-button>
                            <div style="float: right;color: #999999" >
                                <div class="link-type" @click="forgot">忘记密码？</div>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="验证码登录" name="second">
                    <el-form ref="passwordForm" :model="passwordForm" :rules="registerRules" class="register-form">
                        <el-form-item prop="phone">
                            <el-input
                                    v-model="passwordForm.phone"
                                    type="text"
                                    auto-complete="off"
                                    placeholder="请输入手机号">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="code">
                            <el-input
                                    v-model="passwordForm.code"
                                    type="text"
                                    style="width: 65%"
                                    auto-complete="off"
                                    placeholder="请输入验证码"
                                    @keyup.enter.native="passwordLogin">
                            </el-input>
                            <el-button @click="GetCode()" type="primary" plain style="width: 33%;margin-left: 2%;padding: 12px 10px" v-if="verShow">获取验证码</el-button>
                            <el-button disabled type="info" style="width: 33%;margin-left: 2%;padding: 12px 10px" v-else><span>{{timer}}</span>秒后重新获取</el-button>
                        </el-form-item>
                        <el-form-item style="width:100%;">
                            <el-button
                                    :loading="loading"
                                    size="medium"
                                    type="primary"
                                    style="width:100%;"
                                    @click.native.prevent="passwordLogin"
                            >
                                <span v-if="!loading">登录</span>
                                <span v-else>请稍后...</span>
                            </el-button>
                            <div style="float: right;color: #999999" >
                                <div class="link-type" @click="forgot">忘记密码？</div>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
        <el-dialog
                title="忘记密码"
                :visible.sync="forgetShow"
                width="409px"
                :before-close="close">
            <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
                <el-form-item prop="phone">
                    <el-input v-model="registerForm.phone" type="text" auto-complete="off" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input
                            v-model="registerForm.code"
                            auto-complete="off"
                            placeholder="验证码"
                            style="width: 65%"
                            @keyup.enter.native="handleRegister"
                    ></el-input>
                    <el-button @click="GetForgetCode()" type="primary" plain style="width: 33%;margin-left: 2%;padding: 12px 10px" v-if="verShow">获取验证码</el-button>
                    <el-button disabled type="info" style="width: 33%;margin-left: 2%;padding: 12px 10px" v-else><span>{{timer}}</span>秒后重新获取</el-button>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                            v-model="registerForm.password"
                            type="password"
                            auto-complete="off"
                            placeholder="密码"
                            @keyup.enter.native="handleRegister"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="confirmPassword">
                    <el-input
                            v-model="registerForm.confirmPassword"
                            type="password"
                            auto-complete="off"
                            placeholder="确认密码"
                            @keyup.enter.native="handleRegister"
                    ></el-input>
                </el-form-item>
                <el-form-item style="width:100%;">
                    <el-button
                            :loading="loading"
                            size="medium"
                            type="primary"
                            style="width:100%;"
                            @click.native.prevent="handleRegister"
                    >
                        <span v-if="!loading">确认</span>
                        <span v-else>请稍后...</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
  import { getLogin } from '../../../api/welcome'
  import { getCode, getRePassword, getUserInfo, passwordLogin } from '../../../api/login'


  export default {
    name: 'loginDialog',
    props:{
      dialogVisible:{
        type:Boolean,
        default:false
      }
    },
    data(){
      const equalToPassword = (rule, value, callback) => {
        if (this.registerForm.password !== value) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      };
      return{
        activeName:'first',
        forgetShow:false,
        loginForm:{},
        verShow: true, // 判断显示哪个按钮
        timer: 60, // 短信验证码倒计时
        passwordForm:{},
        registerForm:{},
        registerRules: {
          username: [
            { required: true, trigger: "blur", message: "请输入您的账号" },
            { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
          ],
          phone:[
            { required: true, message: '请输入手机号', trigger: 'blur', },
            { pattern: /^1[0-9]{10}$/, message: '请输入正确手机号', trigger:  'blur', },
          ],
          password: [
            { required: true, trigger: "blur", message: "请输入您的密码" },
            { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
          ],
          confirmPassword: [
            { required: true, trigger: "blur", message: "请再次输入您的密码" },
            { required: true, validator: equalToPassword, trigger: "blur" }
          ],
          code: [{ required: true, trigger: "blur", message: "请输入验证码" }]
        },
        loading: false,
      }
    },
    methods:{
      handleClose(){
        this.$emit('dialogClose')
        this.loginForm={}
        this.passwordForm={}
      },
      close(){
        this.forgetShow = false
        this.registerForm = {}
      },
      handleClick(){

      },
      forgot(){
        this.forgetShow = true
      },
      handleLogin(){
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true;
            getLogin(this.loginForm).then(res=>{
              if (res.code === 200){
                this.loading = false
                this.$emit('close')
                this.$store.commit('SET_TOKEN', res.token)
                this.$store.dispatch('GET_DICT_LIST')
                getUserInfo().then(res=>{

                  if (res.code === 200){
                    this.$store.commit('SET_INFO',res.user)
                      console.log(res.user)
                    this.$router.push("/")
                  }
                })
              }
            }).catch(() => {
              this.loading = false
            });
          }
        });
      },
      passwordLogin(){
        this.$refs.passwordForm.validate(valid => {
          if (valid) {
            // this.$emit('close')
            this.loading = true;
            passwordLogin(this.passwordForm).then(res=>{
              this.loading = false
              if (res.code === 200){
                this.$emit('close')
                this.$store.commit('SET_TOKEN', res.token)
                this.$store.dispatch('GET_DICT_LIST')
                getUserInfo().then(res=>{
                  if (res.code ===200){
                      console.log("个人数据",res)
                    this.$store.commit('SET_INFO',res.user)
                      console.log(res.user)
                      this.$router.push("/")
                  }
                })
              }
            }).catch(() => {
              this.loading = false
            });
          }
        });
      },

      GetCode () {
        const regEmali = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
        if (regEmali.test(this.passwordForm.phone)) {
          getCode({phone:this.passwordForm.phone}).then(res=>{
            if (res.code === 200){
              this.verShow = false
              const authTimer = setInterval(() => {
                this.timer--
                if (this.timer <= 0) {
                  this.verShow = true
                  this.timer = 60
                  clearInterval(authTimer)
                }
              }, 1000)
            }
          })
        } else {
          this.$message.error('请输入合法手机')
        }
      },
      GetForgetCode(){
        const regEmali = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
        if (regEmali.test(this.registerForm.phone)) {
          getCode({phone:this.registerForm.phone}).then(res=>{
            if (res.code === 200){
              this.verShow = false
              const authTimer = setInterval(() => {
                this.timer--
                if (this.timer <= 0) {
                  this.verShow = true
                  this.timer = 60
                  clearInterval(authTimer)
                }
              }, 1000)
            }
          })
        } else {
          this.$message.error('请输入合法手机')
        }
      },
      handleRegister(){
        this.$refs.registerForm.validate(valid => {
          if (valid) {
            getRePassword({ code:this.registerForm.code,phonenumber:this.registerForm.phone,newPassword:this.registerForm.password }).then(res=>{
              if (res.code === 200){
                this.$message.success('修改成功')
                this.forgetShow = false
                this.$emit('close')
              }
            })
          }
        });
      }
    }
  }
</script>

<style scoped lang="less">
    .loginDialog{
        ::v-deep .el-dialog__wrapper{
            max-width: 100%!important;
        }
        ::v-deep.el-dialog{
            .el-dialog__body{
                padding-top: 0;
            }
            .el-tabs__item{
                width: 180px;
            }
            .el-dialog__footer{
                /*text-align: center ;*/
            }
        }
        .link-type:hover{
            cursor: pointer;
        }
    }

</style>
